<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/jquery-3.3.1.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <!-- navbar  和navbar-default默认bootstrap的class    role="navigation"角色，导航条-->
    <div class="navbar navbar-default n-header" role="navigation">
        <!-- container-fluid流式布局的class -->
        <div class="container-fluid n-header-wrapper">
          <a class="navbar-brand jx-logo" href="#">
            <img src=".//images/logo2.jpg" alt="学生管理系统">
          </a>
          <div class="navbar-wrapper">
            <ul class="nav navbar-nav nav-items">
                <li>
                    <a class="nav-item" href="#"  data-toggle="modal" data-target="#infoModal">
                        <span>消息</span>
                    </a>
                </li>
                <li>
                    <a class="nav-item" href="#" data-toggle="modal" data-target="#setModal" >
                        <span>设置</span>
                    </a>
                </li>
                <li class="dropdown">
                    <a class="nav-item dropdown-toggle" href="#" data-toggle="dropdown">
                        <span>安全退出</span>
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="login.html">退出</a>
                        </li>
                        <li>
                            <a href="#">注销</a>
                        </li>
                        <li>
                            <a href="#">切换账号</a>
                        </li>
                        <li class="divider"></li>
                        <!-- 一条线 -->
                        <li>
                            <a href="#">帮助</a>
                        </li>
                    </ul>
                </li>
            </ul>
          </div>
        </div>
      </div>
      <div style="clear: both;"></div>
      <!-- 顶部导航栏结束 -->
      <div class="main">
          <!-- 流式布局 -->
        <div class="container-fluid main-content">
          <div class="row mian-row">
            <!-- 左侧边栏 -->
            <div class="col-md-2 col-lg-2 left">
                <div class="current-user">
                    <span>当前用户：</span>
                    <span class="uname">Admin</span>
                </div>
                <div class="class-div">
                    <ul class="class-list">
                      <li>1班</li>
                      <li>2班</li>
                    </ul>
                </div>
            </div>
            <!-- 右侧边栏 -->
            <div class="col-md-10 col-lg-10 right">
                <div class="right-content">
                  <!-- 头部 -->
                  <div class="right-header">
                    <span>当前：首页-</span>
                    <span class="right-class">1班</span>
                  </div>
                  <!-- 班级和搜索框 -->
                  <div class="right-info">
                    <div class="col-md-8">
                      <span class="right-class">1班</span>
                      
                    </div>
                    <div class="col-md-4">
                      <div class="searchBox fr">
                          <div class="searchInput fl">
                            <input type="text" placeholder="用户名">
                          </div>
                          <div class="searchBtn fl">
                            <input type="submit" >
                          </div>
                      </div>
                     </div>
                  </div>
                  <!-- 按钮 -->
                  <div class="col-md-12">
                    <div class="right-btns">
                      <!-- btn-default 是白色,info是蓝色,danger是红色,success是绿色 -->
                      <button class="btn btn-default" data-toggle="modal" data-target="#myModal">添加</button>
                      <button class="btn btn-info">修改</button>
                      <button class="btn btn-danger">删除</button>
                      <button class="btn btn-success">账号授权</button>
                    </div>
                  </div>
                  
                  <!-- 学生信息 -->
                  <div class="col-md-12">
                    <table class="table table-hover">
                      <thead>
                        <!-- tr表示行 th表头单元格 -->
                        <tr>
                          <th style="width: 2%;">
                            <input class="all-check" type="checkbox">
                          </th>
                          <th style="width: 10%;">姓名</th>
                          <th style="width: 10%;">学号</th>
                          <th style="width: 15%;">手机号</th>
                          <th style="width: 8%;">性别</th>
                          <th style="width: 8%;">年龄</th>
                          <th style="width: 20%;">专业</th>
                          <th style="width: 27%;">操作</th>
                        </tr>
                      </thead>
                      <tbody class="studnet-info">
                        <!-- <tr>
                          <td><input type="checkbox"></td>
                          <td>张三丰</td>
                          <td>001</td>
                          <td>189999999</td>
                          <td>男</td>
                          <td>18</td>
                          <td>移动应用开发</td>
                          <td>
                            <button class="btn btn-info">编辑</button>
                            <button class="btn btn-danger">删除</button>
                          </td>
                        </tr> -->
                      </tbody>
                    </table>
                  </div>

                </div>
            </div>
          </div>
        </div>
      </div>

      <!-- $('#infoModal').modal('show') 表示再加载完页面时这个infoModal直接加载出来 -->

      <!-- 消息的Modal -->
      <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="infomyModalLabel">站内信</h4>
            </div>
            <div class="modal-body">
                <ul>
                  <li><a href="#">【系统信息】您已被选中花呗免还款！</a></li>
                  <li>【系统信息】您已被选中信用卡免还款！</li>
                  <li>【警示提示】勿信虚假信息！！</li>
                </ul>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>


       <!-- 设置的Modal -->
       <div class="modal fade" id="setModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="setmyModalLabel">系统设置</h4>
            </div>
            <div class="modal-body">
                <ul>
                  <li>你要干嘛呀</li>
                  <li>就不告诉你</li>
                </ul>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal新增&编辑 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"><span class="stu-title">新增</span>学院信息</h4>
      </div>
      <div class="modal-body stu-modal-body">
        <div class="col-md-12">
          <div class="col-md-4">
              <div class="e-tr">
                  <label class="e-td" for="">姓名</label>
                  <input class="e-td e-input e-name" type="text" placeholder="">
              </div>
          </div>
          <div class="col-md-4">
              <div class="e-tr">
                  <label class="e-td" for="">学号</label>
                  <input class="e-td e-input e-sno" type="text" placeholder="">
              </div>
          </div>
          <div class="col-md-4">
              <div class="e-tr">
                  <label class="e-td" for="">手机号</label>
                  <input class="e-td e-input e-tel" type="text" placeholder="">
              </div>
          </div>
          <div class="col-md-4" role="form">
              <div class="e-tr">
                  <!-- <label class="e-td" for="">性别</label><input class="e-td e-input" type="text" placeholder="新蓝剑"> -->
                  <label class="e-td" for="">性别</label>
                  <select id="u-select" class="e-select" style="background-color: #fff;">
                      <option value="m">男</option>
                      <option value="f">女</option>
                  </select>
              </div>
          </div>
          <div class="col-md-4">
              <div class="e-tr">
                  <label class="e-td" for="" >年龄</label>
                  <input class="e-td e-input e-age" type="text" placeholder="">
              </div>
          </div>
          <div class="col-md-4">
              <div class="e-tr">
                  <label class="e-td" for="">专&nbsp;&nbsp;&nbsp;&nbsp;业</label>
                  <input class="e-td e-input e-major" type="text" placeholder="">
              </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary addEditBtn">确定</button>
      </div>
    </div>
  </div>
</div>

<!-- 删除的Modal -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="delModalLabel">提示</h4>
      </div>
      <div class="modal-body">
        <p>确定要删除吗？</p>
        <p>此操作不可恢复</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary  del-sure">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
        <script src="./js/ls.js"></script>
        <script src="./js/json.js"></script>
      <script>
     
        $(function(){

        //左侧激活班级索引
        var  classIndex=0;
        //右侧学生所在行的索引
        var  trIndex=0;
        //students_json_01来自json.js
        var studentArr=[students_json_01.data,students_json_02.data]; 
        //判断点击了那个确定按钮
        //var editStatus='edit add';

        saveStuInfo(false);//先存数据再显示数据。
        showUserName();
        showCurrentClass();
        showStuInfo();
       

          //学生信息的本地持久存储。
          function saveStuInfo(flag){
            //没有localStorage，存到本地 stuInfo存储内容。
            if(!localStorage.getItem('stuInfo')||flag){//没有数据的时候
              var stuStr=JSON.stringify(studentArr);//JSON.stringify存储信息转换字符串.parse将字符串转换成数字
              localStorage.setItem('stuInfo',stuStr);//本地存储来使用localStorage
              // localStorage.getItem('stuInfo',[0][0].age);
            
            }else{
              //有localStorage，就用这个。
              studentArr=JSON.parse(localStorage.getItem('stuInfo'));
            }
          
      
          }


          //显示当前用户
          function showUserName(){
            //get_value_from_storage()是ls.js中保存的本地信息
            var uname=get_value_from_storage('USERID');
          $('.uname').html(uname)
          }
         // localStorage.getItem获取指定本地存储的值,set是存储。
          //var uname=localStorage.getItem('USERID');
          

          //显示当前所有班级
          function showCurrentClass(){
            //class_json来自json.js
            var classArr=class_json.data;
          var liContent='';
          for(var i=0;i<classArr.length;i++){
            liContent +='<li data-index='+ i +'>'+classArr[i].classname+'</li>';
            // <td><input type="checkbox" name="" id=""></td>
            //               <td>张三丰</td>
            //               <td>001</td>
            //               <td>189999999</td>
            //               <td>男</td>
            //               <td>18</td>
            //               <td>移动应用开发</td>
            //               <td>
            //                 <button class="btn btn-info">编辑</button>
            //                 <button class="btn btn-danger">删除</button>
            //               </td>
          }
          $('.class-list').html(liContent);
          $('.class-list li').eq(0).addClass('active');//.eq(0)默认显示第一个班级的信息

          }
       
          //写死的li样式。
          // $('.class-list li').click(function(){
          //   $('.class-list li').removeClass('active')
          //   $(this).addClass('active')
          // })

          //点击班级列表，切换相应的学生信息。  
          //事件代理/事件委托(delegate)增加li后的样式
          $('.class-list').delegate('li','click',function(){
            $('.class-list li').removeClass('active');
            $(this).addClass('active');

            //更新班级索引
            classIndex=$(this).attr('data-index');
            
            //将拿到的ul值换掉右边的值。
            //$('.right').html($(this).html());

             // 更新右侧班级名称
              var classTxt = $(this).html();
              $('.right-class').html(classTxt);
              showStuInfo();
              
          })
          
          //原生js写法 后来生成。
          // var ul=document.getElementsByclssIndex('class-list')[0];
          // ul.addEventListener('click',function(e){
          //   if(e.target && e.target.nodeName.toUpperCase=='LI'){
          //      //target指向事件发生时的元素;nodeName指定节点的节点名称;toUpperCase() 方法用于把字符串转换为大写。
          //      console.log("li被点击了")
          //   }
           
          // })

        //显示学生信息
        function showStuInfo(){
        var studentContent='';
        for(var i=0;i<studentArr[classIndex].length;i++){
          studentContent+="<tr data-index="+i+"><td><input class='stu-check' type='checkbox'></td>"+
            "<td>"+studentArr[classIndex][i].truename+"</td>"+
            "<td>"+studentArr[classIndex][i].sno+"</td>"+
            "<td>"+studentArr[classIndex][i].tel+"</td>"+
            "<td>"+(studentArr[classIndex][i].gender=='m'?'男':'女')+"</td>"+
            "<td>"+studentArr[classIndex][i].age+"</td>"+
            "<td>"+studentArr[classIndex][i].major+"</td>"+
            "<td><button class='btn btn-edit btn-info btn-index' data-toggle='modal' data-target='#myModal'>编辑</button>"+
            "<button class='btn btn-del btn-danger btn-index' data-toggle='modal' data-target='#delModal'>删除</button></td></tr>"

        }
        $('.studnet-info').html(studentContent);

        }

              // //事件代理/事件委托(编辑)/删除
              // $('.student-info').delegate('.btn-index','click',function(){
              //   //parents向上找父元素(不至一个）
              //   trIndex =($(this).parents('tr').attr('data-index'));
              //   console.log(studentArr[classIndex][trIndex]);
              // //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
              //   //“checked”和“selected”使用prop。  
              //   //$(this).parents('tr').find('input').prop('checkbox',true)
              // })

        // 获取学生在本班级中的序号
      $('.studnet-info').delegate('.btn-index', 'click', function() {
        trIndex = $(this).parents('tr').attr('data-index');
      })

      // 编辑学生信息
      $('.studnet-info').delegate('.btn-edit', 'click', function() {
        $('.stu-title').html('编辑');
        var stu=studentArr[classIndex][trIndex];
        // 讲该学生的信息填入对应输入框
        $('.e-name').val(stu.truename);
        $('.e-sno').val(stu.sno);
        $('.e-tel').val(stu.tel);
        $('.e-select').val(stu.gender);
        $('.e-major').val(stu.major);
        $('.e-age').val(stu.age);
        // 当前编辑状态：编辑
        $('.addEditBtn').attr('edit-status', 'edit');
      })

      // 新增学生信息
      $('.add-stu-btn').click(function() {
        // 置空输入框
        $('.e-name').val('');
        $('.e-sno').val('');
        $('.e-tel').val('');
        $('.e-select').val('m');
        $('.e-major').val('');
        $('.e-age').val('');
        // 当前编辑状态：新增
        $('.addEditBtn').attr('edit-status', 'add');
      })

      // 新增或编辑学生的保存按钮
      $('.addEditBtn').click(function () {
        var stu = {};
        // 获取输入框中的学生数据
        stu.truename = $('.e-name').val();
        stu.sno = $('.e-sno').val();
        stu.tel = $('.e-tel').val();
        stu.gender = $('.e-select').val();
        stu.major = $('.e-major').val();
        stu.age = $('.e-age').val();
        // 判断是新增还是编辑
        var status = $(this).attr('edit-status');
        
        if(status === 'add'){
          studnetArr[classIndex].push(stu);//添加
        } else {
         
          studentArr[classIndex].splice(trIndex*1,1,stu);
        }
        // 用新的数据更新页面
        saveStuInfo(true);
        showStuInfo();
        
        // 关闭模态框
        $('#myModal').modal('hide');
      })

      


        //删除学生信息
        $('.del-sure').click(function(){
        //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
        //删掉对应的学生信息
        studentArr[classIndex].splice(trIndex*1,1);
        //用新的数据更新页面
        saveStuInfo(true);
        showStuInfo();
        
        // 关闭模态框
        $('#delModal').modal('hide');
        })
      

          // 点击全选按钮
      $('.all-check').change(function() {
        var flag = $(this).prop('checked');
        // $().each是备选方案
        $('.stu-check').prop('checked', flag)
      })

      // 点击每一项
      $('.stu-check').on('change', function() {
        if($('.stu-check:checked').length == $('.stu-check').length) {
          $('.all-check').prop('checked', true);
        }else {
          $('.all-check').prop('checked', false);
        }
        // 追求极致简洁的代码，损失了可读性：
        // $('.all-check').prop('checked', $('.stu-check:checked').length == $('.stu-check').length);
      })

      $('.jx-logo').click(function(){
      var url='https://api.imjad.cn/cloudmusic/?type=song&id=28012031&br=128000';
       
        $.ajax({
          url:url,
          method:'GET',
          success: function(res){
              console.log(res.data[0].url)
              alert('当前歌曲格式：'+res.data[0].encodeType)
              //跳转界面
              window.location.href=res.data[0].url
             // window.open(res.data[0].url);
        
          }
        })

      })

          
      })
      </script>
</body>
</html>